<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vmenu product category</title>
<script src="../../../assets/js/jquery-1.4.4.min.js"></script>
<link rel="stylesheet" href="../../../assets/third_party/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script src="../../../assets/third_party/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="../../../assets/third_party/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="../../../assets/third_party/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
</head>
    <style>
    body {
        color: #010101;
        font-family: Arial;
        font-size: 12px;
    }
    #produc_category_wi_1 {
        width:250px;
        float:left;
        height:500px;
        margin:auto;
        background-color:#ddd;
    }
    .produc_category_1 .title_module{
/*color:#7e8f0c;*/
}

    .produc_category_1  .module_list .active .elt_list_cat, .produc_category_1  .module_list  .highlight .elt_list_cat{
	/*background : url(bgr_cat_active.png) repeat-x;*/
}
    </style>
<body>

<div class="container">

<!--PRODUCT CATEGORY WIDGET [slug:product_category, library:0, widget instance:1]-->
  <div id="produc_category_wi_1" class="produc_category_1">
	<!--Load css of widget-->
    <link rel="stylesheet" type="text/css" href="product_category_1.css" />

<div class="wrapper_module">
		<div class="title_module" id="category">CATEGORIES</div>
		    <script>
    $(document).ready(function() {
		$(".module_list .list_cat").hover(
  function () {
  
 $(this).addClass("highlight");
  }, 
  function () {
$(this).removeClass("highlight");
  }
);
			$(".sub_menu li").hover(
  function () {
  
 $(this).find('a').addClass("sub_active");
  }, 
  function () {
$(this).find('a').removeClass("sub_active");
  }
);

$(".arrow_cat a").click(function(){	
    $(this).parent().parent().next().slideToggle("slow"); 
    return false;
});
	
			});
    </script>
		<div class="module_list">

				<div class="list_cat active">
					<div class="elt_list_cat">
					<div class="title_cat">	<a href="#" >Burberry zefze </a></div>
					<div class="arrow_cat"><a href="#" class="arrow_img"></a></div>
					</div>
					<div class="sub_menu">
						<ul>
							<li><a href="#" class="sub_active">Sub menu 1</a></li>
							<li><a href="#" >Sub menu 1</a></li>
							<li><a href="#" >Sub menu 1</a></li>
							<li><a href="#" >Sub menu 1</a></li>
						</ul>
					</div>
					
				</div>	

				<div class="list_cat">
					<div class="elt_list_cat">
					<div class="title_cat">	<a href="#" >Burberry</a></div>
					<div class="arrow_cat"><a href="#" class="arrow_img"></a></div>
					</div>
					<div class="sub_menu">
						<ul>
							<li><a href="#" class="sub_active">Sub menu 1</a></li>
							<li><a href="#" >Sub menu 1</a></li>
							<li><a href="#" >Sub menu 1</a></li>
							<li><a href="#" >Sub menu 1</a></li>
						</ul>
					</div>
					
				</div>		
				
				<div class="list_cat">
					<div class="elt_list_cat">
					<div class="title_cat">	<a href="#" >Burberry</a></div>
					</div>	
				</div>		
				
				<div class="list_cat">
					<div class="elt_list_cat">
					<div class="title_cat">	<a href="#" >Burberry</a></div>
					</div>	
				</div>		
				
		</div>
	</div>
<!--END wrapper_module-->	
  </div>
<!--END PRODUCT CATEGORY WIDGET-->  

</div>
</body>
</html>